window.onload = function () {
  // 进入到页面就要显示学生成绩
  function fn() {
    // 发送Ajax请求获取学生成绩
    axios({
      url: "/score/list",
    }).then((res) => {
      //console.log(res);
      let obj = res.data.data;
      let arr = [];
      if (res.status == 200 && res.data.code == 0) {
        for (let key in obj) {
          arr.push(`<tr>
                    <th scope="row">${key}</th>
                    <td>${obj[key].name}</td>
                    <td data-batch="1" class="score">${obj[key].score[0]}</td>
                    <td data-batch="2" class="score">${obj[key].score[1]}</td>
                    <td data-batch="3" class="score">${obj[key].score[2]}</td>
                    <td data-batch="4" class="score">${obj[key].score[3]}</td>
                    <td data-batch="5" class="score">${obj[key].score[4]}</td>
                </tr>`);
          document.querySelector("tbody").innerHTML = arr.join("");
        }
      }
    });
  }
  fn();
  // 修改/录入成绩
  // 委托给tbody注册点击事件冒泡到每一个子元素身上
  document.querySelector("tbody").addEventListener("click", function (e) {
    // 判断点击的是不是成绩td
    if (e.target.classList.contains("score")) {
      // 把当前点击的td保存起来
      let td = e.target;
      //创建文本输入框追加到td中
      // 如果该点击的td已经有了input子元素,那就不要在加了
      if (!td.querySelector("input")) {
        // 先保存一下当前td里面的成绩
        let txt = td.innerText;
        // 清空td内容
        td.innerHTML = "";
        // 创建input,给当前点击的td追加
        let input = document.createElement("input");
        //input.setAttribute("value", txt);
        td.appendChild(input);
        input.value = txt;
        // 给这个创建出来的input设置一个获得焦点事件
        input.focus();
        //光标在最后
        //input.setSelectionRange(input.value.length, input.value.length);
        // 给当前创建的这个input设置一个键盘弹起事件
        input.addEventListener("keyup", function (e) {
          //判断按下的是否是回车键,如果是就录入/修改
          if (e.key == "Enter") {
            //获取用户输入的新成绩
            let newScore = +input.value;
            //判断一下用户输入的成绩是否合法
            if (isNaN(newScore) || newScore < 0 || newScore > 100) {
              // 提示插件
              return toastr.success("请输入0-100之间的数字");
            }
            // 发送Ajax请求完成录入/修改
            axios({
              method: "post",
              url: "/score/entry",
              data: {
                // 学生id
                stu_id: td.parentNode.firstElementChild.innerText,
                // 第几次成绩
                batch: td.getAttribute("data-batch"),
                //用户输入的新成绩
                score: newScore,
              },
            }).then((res) => {
              // 判断返回结果
              if (res.status == 200 && res.data.code == 0) {
                // 提示插件
                toastr.success(res.data.message);
                // 重新渲染
                //fn();
                txt = newScore;
                input.blur();
              }
            });
          }
        });
        // 给当前创建的input设置一个失去焦点事件
        input.addEventListener("blur", function () {
          td.innerHTML = txt;
        });
      }
    }
  });
};
